<template>
	<view class="user">
		<view class="status_bar">
			我的
		</view>
		<view class="header" @click="userDetail">
			<view class="head-1">
				<image :src="userInfo.image || userImage"></image>
			</view>
			<view class="head-2" v-if="userInfo.id">
				<view class="user-name">{{ userInfo.name }}</view>
			</view>
			<view class="head-2" v-else>
				<view class="user-name">登录/注册</view>
			</view>
			<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
		</view>
		<div class="pointBox box">
			<u-row text-align="center" gutter="16" class="point" style="justify-content: space-between;"
				@click="navigateTo('/pages/order/myOrder?status=0')">
				我的订单
				<view class="all">
					<span style="padding-right: 20rpx;">全部</span>
					<u-icon style="display: flex;align-items: flex-start;" name="arrow-right" color="#666666"></u-icon>
				</view>
			</u-row>

			<view class="order">
				<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
					<div class="bag bag2">

					</div>
					<view>待付款</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=2')">
					<div class="bag bag3">

					</div>
					<view>待收货</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
					<div class="bag bag4">

					</div>
					<view>待评价</view>
				</view>
				<view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
					<div class="bag bag5">

					</div>
					<view>售后</view>
				</view>

			</view>
		</div>

		<div class="inputbox">
			<div class="inputbox_flex1" @click="navigateTo('/pages/business/index')">
				<div class="inputbox_text1">免费开店</div>
				<div class="inputbox_text2">分销商入口</div>
			</div>
			<div class="inputbox_flex2" @click="navigateTo('/pages/gongyingshang/index')">
				<div class="inputbox_text1">企业品牌</div>
				<div class="inputbox_text2">供应商入口</div>
			</div>
		</div>


		<div class="memulist">
			<div class="memuitem" @click="navigateTo('/pages/mine/myCollect')">
				<div class="memuimg">
					<u-image src="../../../static/newImg/collect.png" width="100%" height="100%"></u-image>
				</div>
				<div class="memutext">我的收藏</div>
			</div>


			<div class="memuitem" @click="navigateTo('/pages/business/pinglunlist')">
				<div class="memuimg">
					<u-image src="../../../static/newImg/mypj.png" width="100%" height="100%"></u-image>
				</div>
				<div class="memutext">我的评价</div>
			</div>

			<div class="memuitem" @click="handleLianxiClick">
				<div class="memuimg">
					<u-image src="../../../static/newImg/help.png" width="100%" height="100%"></u-image>
				</div>
				<div class="memutext">联系客服</div>
			</div>


			<div class="memuitem" @click="navigateTo('/pages/tabbar/user/question')">
				<div class="memuimg">
					<u-image src="../../../static/newImg/helpcenter.png" width="100%" height="100%"></u-image>
				</div>
				<div class="memutext">帮助中心</div>
			</div>

			<div class="memuitem" @click="navigateTo('/pages/tabbar/user/aboutus')">
				<div class="memuimg">
					<u-image src="../../../static/newImg/aboutus.png" width="100%" height="100%"></u-image>
				</div>
				<div class="memutext">关于我们</div>
			</div>

			<div class="memuitem" @click="navigateTo('/pages/tabbar/user/message')">
				<div class="memuimg">
					<u-image src="../../../static/newImg/mes.png" width="100%" height="100%"></u-image>
				</div>
				<div class="memutext">消息中心</div>
			</div>
		</div>

		<div class="prolisttitle">—— 猜你喜欢 ——</div>

		<div class="proListdiv">
			<div class="proItems" v-for="items in proList" :key="items.id" @click="goTodetail(items.id)">
				<div class="proItems_img">
					<image :src="items.image" mode="" style="width: 100%;height: 100%; border-radius: 15rpx 15rpx 0 0">
					</image>
				</div>
				<div class="proItems_name">{{items.name}}</div>
				<div class="proItems_price"><span style="font-size: 20rpx;">¥</span> {{items.price}}

					<span class="proItems_savl">月销: {{items.sellNum || 0}}</span>
				</div>


				<!-- <div class="proItems_car" @click.stop="showProductguige(items)">
					<image src="/static/newImg/car.png" style="width: 100%;height: 100%;"></image>
				</div> -->
			</div>
		</div>


	</view>
</template>
<script>
import tool from "@/pages/tabbar/user/utils/tool.vue";
import {
	getCouponsNum,
	getFootprintNum,
	getUserInfo
} from "@/api/members.js";


import {
	getUserWallet
} from "@/api/members";
import { getIndexProduct } from '@/api/home'
import configs from '@/config/config'
import storage from "../../../utils/storage";

export default {
	components: {
		tool,
	},
	data() {
		return {
			configs,
			userImage: configs.defaultUserPhoto,
			coverTransform: "translateY(0px)",
			coverTransition: "0s",
			moving: false,
			userInfo: {},
			couponNum: "",
			footNum: "",
			walletNum: "",
			proList: [],
			params: {
				page: 1,
				limit: 10,
				type: 1,
				keyword: ""
			},
		};
	},
	onLoad() { },
	onShow() {
		this.userInfo = this.$options.filters.isLogin() || {};
	},
	onPullDownRefresh() {
		// this.getUserOrderNum();
		this.userInfo = this.$options.filters.isLogin();
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navigateTo("/pages/mine/set/setUp");
		}
	},
	// #endif

	mounted() {
		this.queryProduct();
	},

	onReachBottom() {
		this.params.page = this.params.page + 1;
		this.queryProduct();
	},

	methods: {
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navigateTo(url) {


			if (!this.$options.filters.isLogin('auth') && url != '/pages/tabbar/user/aboutus') {
				return uni.showToast({
					title: "尚未登录，请先登录",
					icon: "none"
				})
			}
			if (url == '/pages/business/index') {

				// 分销

				getUserInfo({
					id: storage.getUserInfo().id
				}).then((user) => {
					if (user.code == '000000') {
						storage.setUserInfo({
							...user.data
						});
						storage.setHasLogin(true);
						if (user.data.type != 1) {
							return uni.showToast({
								title: "您不是分销商",
								icon: "none"
							})
						} else if (user.data.storeId == -1) {
							return uni.showToast({
								title: "正在审核中",
								icon: "none"
							})
						} else {
							return uni.navigateTo({
								url,
							});
						}
					}
				});

			} else if (url == '/pages/gongyingshang/index') {
				getUserInfo({
					id: storage.getUserInfo().id
				}).then((user) => {
					if (user.code == '000000') {
						storage.setUserInfo({
							...user.data
						});
						storage.setHasLogin(true);
						if (user.data.type != 2) {
							return uni.showToast({
								title: "您还不是供应商",
								icon: "none"
							})
						} else if (user.data.storeId == -1) {
							return uni.showToast({
								title: "正在审核中",
								icon: "none"
							})
						} else {
							return uni.navigateTo({
								url,
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url,
				});
			}
			// else if(url == '/pages/fenxiao/index'){
			// 	getUserInfo({
			// 		id: storage.getUserInfo().id
			// 	}).then((user) => {
			// 		if (user.code == '000000') {
			// 			storage.setUserInfo({
			// 				...user.data
			// 			});
			// 			storage.setHasLogin(true);
			// 			if (user.data.saleId == 0) {
			// 				return uni.showToast({
			// 					title: "您还没有分销权限",
			// 					icon: "none"
			// 				})
			// 			} else if(user.data.saleId == -1){
			// 				return uni.showToast({
			// 					title: "正在审核中",
			// 					icon: "none"
			// 				})
			// 			} else {
			// 				return uni.navigateTo({
			// 					url,
			// 				});
			// 			}
			// 		}
			// 	});
			// }  





		},

		goTodetail(items) {
			uni.navigateTo({
				url: `/pages/product/goods?id=${items}`,
			});
		},

		handleLianxiClick() {
			uni.showToast({
				icon: "none",
				title: '联系: 15707480751',
				duration: 5000
			})
		},
		userDetail() {
			this.userInfo.id ?
				this.navigateTo("/pages/mine/set/personMsg") :
				this.$options.filters.navigateToLogin();;
		},
		async getUserOrderNum() {
			uni.stopPullDownRefresh();

			Promise.all([
				getCouponsNum(), //优惠券
				getFootprintNum(), //浏览数量
				getUserWallet(), //预存款
			]).then((res) => {
				this.couponNum = res[0].data.result;
				this.footNum = res[1].data.result;
				this.walletNum = res[2].data.result.memberWallet;
			});
		},


		queryProduct() {
			uni.showLoading({
				title: "加载中",
			});
			getIndexProduct({
				...this.params
			}).then(res => {
				uni.hideLoading()
				if (res.data.list.length > 0) {
					this.proList.push(...res.data.list)

				} else {

					this.params.page = this.params.page - 1

				}
			})
		}
	},
};
</script>

<style lang="scss" scoped>
html,
body {
	overflow: auto;
}

.money {
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.user {

	.status_bar {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 90rpx;
		color: white;
		font-size: 40rpx;
	}

	.header {
		max-width: 100%;
		padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
		height: calc(var(--status-bar-height) + 481rpx);
		background-size: cover;
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		// background-image: url("/static/img/main-bg.png");
		background-position: bottom;
		background-repeat: no-repeat;
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		background-color: rgb(25, 189, 93);

		.head-1 {
			text-align: center;
			width: 152rpx;
			position: relative;
			display: flex;
			align-items: center;

			image {
				width: 111rpx;
				height: 111rpx;
				border-radius: 50%;
				margin-bottom: 30rpx;
				border: 3px solid #fff;
			}

			.edti-head {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.3);
				top: 100rpx;
				right: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.head-2 {
			flex: 1;
			margin-left: 30rpx;
			margin-top: 172rpx;
			line-height: 1;
		}

		/deep/ .u-icon,
		.u-icon {
			margin-top: 171rpx;
		}
	}

	.pointBox {
		width: 94%;
		margin: -100rpx 3%;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
	}

	.all {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 25rpx;
		color: #666666;
		display: flex;
		align-items: center;
		padding-right: 40rpx;
	}

	.point {
		text-align: center;
		height: 78rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 27rpx;
		color: #0D182E;
		padding-left: 21rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.order {
		height: 140rpx;
		text-align: center;
		font-size: $font-sm;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 3%;
		color: #999;

		.order-item {
			position: relative;
			line-height: 2em;
			width: 96rpx;

			:first-child {
				font-size: 48rpx;
				margin-bottom: 10rpx;
			}
		}
	}
}

.box {
	transform: translateY(-30rpx);
}

.user-name {
	font-size: 34rpx;
}

.bag {
	width: 33rpx;
	height: 36rpx;

	margin: 0 auto;
}

.bag1 {

	background: url('@/static/newImg/all.png') no-repeat;
	background-size: 100% 100%;
}

.bag2 {

	background: url('@/static/newImg/money.png') no-repeat;
	background-size: 100% 100%;

}

.bag3 {

	background: url('@/static/newImg/shouhuo.png') no-repeat;
	background-size: 100% 100%;

}


.bag4 {

	background: url('@/static/newImg/pingjia.png') no-repeat;
	background-size: 100% 100%;

}

.bag5 {

	background: url('@/static/newImg/tuihuo.png') no-repeat;
	background-size: 100% 100%;

}

.memulist {
	width: 94%;
	margin: 35rpx auto;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
	display: grid;
	grid-template-columns: repeat(auto-fill, 25%);
	grid-gap: 55rpx 0;
	padding: 47rpx 43rpx;
	box-sizing: border-box;
}

.memuitem {
	width: 95rpx;
	height: 124rpx;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	margin: 0 auto;
}

.memuimg {
	width: 95rpx;
	height: 90rpx;
}

.memutext {
	width: 100%;
	height: 22rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 22rpx;
	color: #0D182E;
	line-height: 22rpx;
}

.inputbox {
	width: 94%;
	box-sizing: border-box;
	padding: 41rpx 21rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
	margin: 88rpx auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.inputbox_flex1 {
	width: 316rpx;
	height: 197rpx;
	background: rgb(253, 191, 43);
	border-radius: 20rpx;
}

.inputbox_flex2 {
	width: 316rpx;
	height: 197rpx;
	background: rgb(29, 138, 240);
	border-radius: 20rpx;
}

.inputbox_text1 {
	width: 100%;
	height: 46rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 49rpx;
	color: #FFFFFF;
	text-align: center;
	padding-top: 46rpx;
}

.inputbox_text2 {
	width: 100%;
	text-align: center;
	height: 31rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	margin-top: 22rpx;
}

.prolisttitle {
	width: 243rpx;
	height: 26rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 27rpx;
	color: #0D182E;
	line-height: 26rpx;
	margin: 37rpx auto;
}

.proListdiv {
	width: 94%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, 50%);
	grid-gap: 11rpx 0;
}

.proItems {
	width: 347rpx;
	height: 500rpx;
	background-color: #FFFFFF;
	margin: 0 auto;
	position: relative;
	border-radius: 15rpx;
}

.proItems_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 348rpx;

}

.proItems_name {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 26rpx;
	color: #000000;
	padding-left: 27rpx;
	padding-right: 27rpx;
	position: absolute;
	top: 367rpx;
	left: 0;

	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 2; //行数
	line-clamp: 2;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}

.proItems_price {
	position: absolute;
	left: 28rpx;
	bottom: 16rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 30rpx;
	color: #F74600;
}

.proItems_savl {
	margin-left: 10rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 18rpx;
	color: #BCC1CA;
}
</style>
